<template lang="html">
    <div class="editor">
      <div ref="editor" class="textNeirong"></div>
    </div>
  </template>
  
  <script>
  import E from 'wangeditor'
  import { client } from '@/utils/ossClient' // 引入阿里云 OSS 客户端
  
  export default {
    name: 'editoritem',
    data() {
      return {
        editor: null,
        info_: null,
        token: ''
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      isClear: {
        type: Boolean,
        default: false
      },
      state: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      isClear(val) {
        if (val) {
          this.editor.txt.clear()
          this.info_ = null
        }
      },
      value(value) {
        if (value !== this.editor.txt.html()) {
          this.editor.txt.html(this.value)
        }
      },
      state(value) {
        if (value === true) {
          this.editor.enable()
        } else {
          this.editor.disable()
        }
      }
    },
    mounted() {
      this.seteditor()
      this.editor.txt.html(this.value)
    },
    methods: {
      seteditor() {
        // 创建编辑器实例
        this.editor = new E(this.$refs.editor)
        this.editor.config.height = 200 // 富文本编辑器的高度
  
        // 自定义图片上传逻辑
        this.editor.config.customUploadImg = async (files, insertImgFn) => {
          try {
            for (const file of files) {
              const result = await this.uploadToOSS(file) // 调用阿里云 OSS 上传方法
              insertImgFn(`${result.url}`) // 插入图片并设置样式
            }
          } catch (error) {
            console.error('图片上传失败:', error)
            this.$message.error('图片上传失败，请稍后重试！') // 提示用户
          }
        }
  
        // 自定义视频上传逻辑
        this.editor.config.customUploadVideo = async (files, insertVideoFn) => {
          try {
            for (const file of files) {
              const result = await this.uploadToOSS(file) // 调用阿里云 OSS 上传方法
              insertVideoFn(result.url) // 插入视频到编辑器
            }
          } catch (error) {
            console.error('视频上传失败:', error)
            this.$message.error('视频上传失败，请稍后重试！') // 提示用户
          }
        }
  
        // 配置工具栏菜单（完整版）
        this.editor.config.menus = [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入图片
          'video', // 插入视频
          'table', // 表格
          'code', // 插入代码
          'splitLine', // 分割线
          'undo', // 撤销
          'redo', // 重做
          'fullscreen' // 全屏
        ]
  
        // 监听内容变化
        this.editor.config.onchange = (html) => {
          this.info_ = html // 绑定当前逐渐地值
          this.$emit('change', this.info_) // 将内容同步到父组件中
        }
  
        // 创建富文本编辑器
        this.editor.create()
      },
  
      // 上传文件到阿里云 OSS
      async uploadToOSS(file) {
        try {
          const fileName = `${Date.now()}-${file.name}` // 生成唯一的文件名
          const result = await client.put(fileName, file) // 调用 OSS 的 put 方法上传文件
          return {
            url: result.url // 返回文件的访问 URL
          }
        } catch (error) {
          console.error('上传到 OSS 失败:', error)
          throw new Error('上传失败') // 抛出错误以便上层捕获
        }
      }
    }
  }
  </script>
  
  <style>
  .editor {
    width: 100%;
    margin: auto;
    position: relative;
  }
  </style>